<template>

  <!-- 档案 -->

  <div class="board_page">

    <!-- 左边 -->
    <dv-border-box-13
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      style="height:84vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <switch-bar :list="barListLeft" v-model="barModelLeft" @change="barChangeLeft"></switch-bar>

      <el-scrollbar class="tree_scroll">
        <h6 class="l_title-s">{{currentItemLeft.name}}</h6>
        <div v-for="item in currentItemLeft.itemList || []" :key="item.name">
          <div class='left-li common_card-bk'>
            <!-- 总数-->
            <div>
              <div class="card-num-box" v-if="item.name === '管线总数'">
                <p class="title3"> {{item.name}}</p>
                <number-scroll :number="item.num"></number-scroll>
              </div>
              <div class="card-num-box" v-if="item.name === '管线长度统计(m)'">
                <p class="title3"> {{item.name}}</p>
                <number-scroll :number="item.value"></number-scroll>
              </div>
              <div class='left-li-top'>
                <p class='left-li-top-title'>
                  <img src='../imgs/jg_lxlx.png'>

                  {{item.name}}
                </p>

              </div>
              <!--          具体类容-->
              <ul class="left-li-bottom">
                <li v-for="child in item.itemList || []" :key="child.name"
                    :style="`${item.name === '抗震设防等级' ? `width:${49}%;text-align:left;height:35px` : `width:${49}%;text-align:left;height:35px`}`">
                  {{child.name}}
                  <span class="num2 color3">
                <number-change :number="child.num||child.value"></number-change>
              </span> {{item.name === '管线长度统计(m)' ?'m':'段'}}
                </li>
              </ul>
            </div>
          </div>
        </div>

      </el-scrollbar>
    </dv-border-box-13>
    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="height:85vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <switch-bar :list="barListRight" v-model="barModelRight" @change="barChangeRight"></switch-bar>

      <el-scrollbar class="tree_scroll">
        <h6 class="l_title-s">{{currentItemRight.name}}</h6>
        <div class="card-num-box">
          <number-scroll :number="currentItemRight.num"></number-scroll>
        </div>
        <div v-for="item in currentItemRight.itemList || []" :key="item.name">
          <div class='left-li common_card-bk'>
            <!-- 总数-->
            <div>
              <div class="card-num-box" v-if="item.name === '管线总数'">
                <p class="title3"> {{item.name}}</p>
                <number-scroll :number="item.num"></number-scroll>
              </div>
              <div class="card-num-box" v-if="item.name === '管线长度统计(m)'">
                <p class="title3"> {{item.name}}</p>
                <number-scroll :number="item.value"></number-scroll>
              </div>
              <div class='left-li-top'>
                <p class='left-li-top-title'>
                  <img src='../imgs/jg_lxlx.png'>

                  {{item.name}}
                </p>
                <p class='float-right left-li-title-right'>
              <span class='num1 color2'>
                <number-change
                  :number=" item.num"></number-change>
              </span> 处
                </p>
              </div>
              <!--          具体类容-->
              <ul class="left-li-bottom">
                <li v-for="child in item.itemList || []" :key="child.name"
                    :style="`${item.name === '抗震设防等级' ? `width:${49}%;text-align:left;height:35px` : `width:${49}%;text-align:left;height:35px`}`">
                  {{child.name}}
                  <span class="num2 color3">
                <number-change :number="child.num||child.value"></number-change>
              </span> 处
                </li>
              </ul>
            </div>
          </div>
        </div>

      </el-scrollbar>
    </dv-border-box-13>
  </div>
</template>

<script>
  import {archivesCount} from '@/services/model/data-board'
  import {pipeCount} from '@/services/model/pipeline'
  import NumberChange from '../components/number-change.vue'
  import NumberScroll from '../components/number-scroll'
  import SwitchBar from '../components/switch-bar.vue'
  import Enums from '@/utils/enums'

  const Echarts = require('echarts')
  export default {
    mixins:[Enums],
    components: {NumberChange, SwitchBar, NumberScroll},
    data() {
      return {
        charts: null,
        showLoading: true,
        // 排查总数统计列表
        leftTotalList: [],
        rightTotalList: [],
        EnumPipeTypeList: [],
        currentItemLeft: {},
        currentItemRight: {},
        barModelLeft: '',
        barModelRight: '',
        dataCount: {},
        barListLeft: [
          {
            name: '管线统计',
            code: '管线统计'
          },

        ],
        barListRight: [
          {
            name: '缺陷数量统计',
            code: '缺陷数量统计'
          },
          {
            name: '缺陷等级统计',
            code: '缺陷等级统计'
          },
        ],
        roadCountKm: {},
        roadCountNum: {},
        slopeCountHeight: {},
      }
    },
    methods: {
      // bar改变
      barChangeLeft() {
        this.currentItemLeft = this.leftTotalList.find(x => x.name === this.barModelLeft) || {}
      },
      // bar改变
      barChangeRight() {
        this.currentItemRight = this.rightTotalList.find(x => x.name === this.barModelRight) || {}
      },
      // 路线改变
      refresh(pipeType,deptTreeId,baseUnitId) {
        this.queryLeftTotal(pipeType,deptTreeId,baseUnitId)
        this.$emit('changeMap', pipeType)
      },


      // 查询左边顶部的统计数据
      async queryLeftTotal(pipeType,deptTreeId,baseUnitId) {
        this.leftTotalList=[]
        this.rightTotalList=[]
        const {data} = await pipeCount({pipeType,deptTreeId,baseUnitId})
        let roadCount = {
          name: '管线统计',
          itemList: data.filter(x => x.name === '管线总数' || x.name === '管线长度统计(m)')
        }
        this.leftTotalList.push(roadCount)
        this.rightTotalList.push(data[2])
        this.rightTotalList.push(data[3])
        this.barModelLeft = this.leftTotalList[0]?.name
        this.barModelRight = this.rightTotalList[0]?.name
        this.barChangeLeft()
        this.barChangeRight()
        this.showLoading = false


      },
    },
    async mounted() {
      this.queryDictList(['EnumPipeType'], ['EnumPipeTypeList'])

      this.refresh()
    }
  }
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>

  /deep/ .tree_scroll .el-scrollbar__wrap {
    height: 68vh;
  }

  .common_scrollbar {
    width: 100%;
    height: 100%;
  }

  .common_scrollbar /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
    margin-bottom: 0 !important;
  }

  .left_item {
    display: flex;
    align-items: center;
    cursor: pointer;

    img {
      width: 2.5rem /* 40/16 */;
      height: 2.5rem /* 40/16 */;
      margin-right: 1rem /* 16/16 */;
    }

    em {
      flex: 1;
      font-weight: 600;
      font-size: 1.125rem /* 18/16 */;
      line-height: 1.5625rem /* 25/16 */;
      letter-spacing: 0.125em;
      color: #D5E3E8;
    }

    & > span::after {
      margin-left: .25rem /* 4/16 */;
      /*content: '个';*/
      font-size: .75rem /* 12/16 */;
      line-height: 1.0625rem /* 17/16 */;
      color: #939EA3;
    }
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .left-li {
    position: relative;
    margin: 0.5rem;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 1.125rem;
  }

  .left-li .left-li-title-right {
    float: right;
    font-size: 0.75rem;
    color: #939EA3;
  }

  .left-li-bottom {
    flex-wrap: wrap;
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-between;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;

    &::before, &::after {
      content: " ";
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      background: #3A506A;
      position: absolute;
      top: -0.15rem;
      z-index: 2;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    li {
      width: 50%;

      &:nth-child(even) {
        text-align: right;
      }
    }
  }

  .left-li .left-li-top-title img {
    width: 1.8rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .chart_3 {
    width: 100%;
    height: 50vh;
  }
</style>
